<template>
  <div>
    <div class="right-nav-box" :style="{ right: isSqzk ? '-42px' : '0px' }">
      <div style="position: relative">
        <div>
          <div @click="handleAsideNav" class="position-box-zksq flex-center">
            <i
              :class="isSqzk ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
            ></i>
          </div>
        </div>
        <li>
          <div
            target="_blank"
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @click="goToNewUserActivity"
          >
            <div class="img item1"></div>
            <span>领取礼包</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @mouseenter="
              isShowEwm = true
              ewmIndex = 1
            "
            @mouseleave="isShowEwm = false"
          >
            <div class="img item2"></div>
            <span>咨询老师</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @click="show53Kefu()"
          >
            <div class="img item3"></div>
            <span>在线客服</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @click="goToPersonal()"
          >
            <div class="img item4"></div>
            <span>购物车</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @mouseenter="
              isShowEwm = true
              ewmIndex = 2
            "
            @mouseleave="isShowEwm = false"
          >
            <div class="img item5"></div>
            <span>app</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @mouseenter="
              isShowEwm = true
              ewmIndex = 3
            "
            @mouseleave="isShowEwm = false"
          >
            <div class="img item6"></div>
            <span>公众号</span>
          </div>
        </li>
        <li>
          <div
            class="right-nav-item flex-center flex-wrap flex-column-wrap"
            @click="showComplain"
          >
            <div class="img item7"></div>
            <span>投诉建议</span>
          </div>
        </li>
        <div
          v-show="isShowEwm"
          class="ewm-box flex-center flex-column-wrap"
          :style="{ top: ewmMap[ewmIndex].top }"
        >
          <img :src="parseResourceUrl(ewmMap[ewmIndex].ewm)" alt="二维码" />
          <span>{{ ewmMap[ewmIndex].label }}</span>
        </div>
      </div>
    </div>
    <complain v-if="isShowComplain" @closeComplain="closeComplain"></complain>
  </div>
</template>

<script>
import entryStore from '@/store/entry_store'
import complain from '@/components/complain/index.vue'
export default {
  components: {
    complain
  },
  data() {
    return {
      isShowComplain: false, //是否显示意见反馈弹窗
      isShowEwm: false, //是否展示二维码
      ewmIndex: 1,
      ewmMap: {
        1: {
          label: '扫码添加老师微信',
          ewm:
            '//image.zlketang.com/public/news/images/new_official/other/teacher_ewm.png',
          top: '8px'
        },
        2: {
          label: '扫码下载APP',
          ewm:
            '//image.zlketang.com/public/news/images/new_official/other/app-download.png',
          top: '190px'
        },
        3: {
          label: '扫码关注我们',
          ewm:
            '//image.zlketang.com/public/news/images/new_official/other/wxpub_ewm.jpg',
          top: '250px'
        }
      },
      isSqzk: false
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.user.isLogin
    },
    is_new() {
      return this.$store.state.user.is_new
    }
  },
  beforeMount() {
    entryStore.loadModule(this.$store, ['user'])
  },
  mounted() {
    this.$bus.$on('showTsDialog', () => {
      this.showComplain()
    })
  },
  methods: {
    goToNewUserActivity() {
      storage.set('isGiftClick', 1)
      this.$store.commit('user/setIsShowGift', true)
    },
    closeComplain(val) {
      this.isShowComplain = val
    },
    // 显示投诉建议弹窗
    showComplain() {
      if (!this.isLogin) {
        this.showLoginDialog()
        return
      }
      this.isShowComplain = true
    },
    goToPersonal() {
      if (!this.isLogin) {
        this.showLoginDialog()
        sessionStorage.setItem('lastUrl', '/personal/index.html?name=6')
        return
      }
      this.goTo('/personal/index.html?name=6', { target: '_blank' })
    },
    // 控制侧边导航栏 展开收起
    handleAsideNav() {
      this.isSqzk = !this.isSqzk
    }
  }
}
</script>

<style scoped>
.right-nav-box {
  position: fixed;
  right: 0;
  /* bottom: 200px; */
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(70, 80, 97, 0.1);
  border-radius: 12px 0px 0px 12px;
  padding: 10px 0;
  z-index: 100;
  transition: all 0.3s ease;
}
.right-nav-item {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #383838;
  line-height: 17px;
  cursor: pointer;
}

.right-nav-item .img {
  height: 19px;
  width: 19px;
  margin-bottom: 5px;
  background-image: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100');
}

.item1 {
  background-position: -143px -87px;
}
.item2 {
  background-position: -197px -87px;
}
.item3 {
  background-position: -251px -87px;
}
.item4 {
  background-position: -306px -87px;
}
.item5 {
  background-position: -359px -86px;
}
.item6 {
  background-position: -413px -87px;
}
.item7 {
  background-position: -467px -87px;
}

a {
  text-decoration: none;
  color: inherit;
}
.ewm-box {
  position: absolute;
  padding: 10px;
  right: 80px;
  top: 0;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(70, 80, 97, 0.1);
}
.ewm-box::after {
  display: inline-block;
  content: '';
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  border-left: 15px #fff solid;
  border-top: 10px transparent solid;
  border-right: 15px transparent solid;
  border-bottom: 10px transparent solid;
}
.ewm-box img {
  width: 120px;
  height: 120px;
}
.ewm-box span {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  margin-top: 10px;
}
.position-box-zksq {
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(70, 80, 97, 0.1);
  cursor: pointer;
  border-radius: 50%;
}
.position-box-zksq:hover {
  color: #383838;
}
</style>
